<script>
import cAudio from '@/component/audio/groupplayer.vue'
export default {
  name: 'custom-filespop',
  components: { cAudio },
  props: {
    footBtns: {
      type: Array,
      default: () => [
        { text: '确定', type: 'primary', method: 'handleSubmit' },
        { text: '取消', method: 'handleClose' },
      ],
    },
    width: {
      type: String,
      default: '600',
    },
    height: {
      type: String,
      default: '450',
    },
    title: {
      type: String,
      default: '提示',
    },
  },
  data() {
    return {
      fileType: 'image',
      visible: false,
      file: {},
      files: [],
      imgshow: false,
    }
  },
  methods: {
    setFiles({ files, fileType }) {
      this.files = files
      this.fileType = fileType
    },
    loadImage(refname) {
      this.fixImage(refname)
    },
    fixImage(refname) {
      if (!refname) return
      const self = this
      const imgHeight = this.$refs[refname].naturalHeight
      const imgWidth = this.$refs[refname].naturalWidth
      const boxHeight = this.$refs.filebox.offsetHeight
      const boxWidth = this.$refs.filebox.offsetWidth
      const newWidth = (imgWidth / imgHeight) * boxHeight
      if (newWidth > boxWidth) {
        const newHeight = (imgHeight / imgWidth) * boxWidth
        this.$refs[refname].height = newHeight
        this.$refs[refname].width = boxWidth
      } else {
        this.$refs[refname].height = boxHeight
        this.$refs[refname].width = newWidth
      }
      setTimeout(() => {
        self.imgshow = true
      }, 300)
    },
    handlerOpen() {
      //   if (this.fileType === 'image') this.imgshow = false
    },
    handlerClose() {},
    handleEnter() {
      if (this.fileType === 'audio') {
        this.$refs['c-audio'].init(
          this.files.map((i) => ({ src: i.url })),
          0
        )
      }
    },
    handleClose() {
      this.visible = false
    },
    handleSubmit() {
      this.visible = false
    },
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    },
    render_footer() {
      return ''
      // <span slot="footer" class="dialog-footer">
      //       { this.render_footer() }
      //     </span>
      // return this._l(this.footBtns, btn => {
      //   const { type = '', method, text } = btn
      //   return <c-button type={ type } on-click={ this[method] }>{ text }</c-button>
      // })
    },
    render_image() {
      return (
        <c-carousel
          trigger="click"
          indicator-position="none"
          autoplay={false}
          height="480px"
        >
          {this._l(this.files, (file, index) => {
            return (
              <c-carousel-item>
                <img
                  src={file.url}
                  class="pop-imgs"
                  ref={'image-' + index}
                  on-load={() => this.loadImage('image-' + index)}
                />
              </c-carousel-item>
            )
          })}
        </c-carousel>
      )
    },
    render_audio() {
      return (
        <div class="files-pop-audio">
          <c-audio ref="c-audio"></c-audio>
        </div>
      )
    },
    render_video() {
      return (
        <video
          src={this.files && this.files[0] ? this.files[0].url : ''}
          controls="controls"
        >
          您的浏览器不支持 video 标签。
        </video>
      )
    },
    getIfShow() {
      const classes = ['files-pop-content']
      if (!this.imgshow) classes.push('img-hide')
      return classes.join(' ')
    },
    render_body() {
      return (
        <div staticClass={this.getIfShow()} ref="filebox">
          {this.fileType === 'image' ? this.render_image() : ''}
          {this.fileType === 'audio' ? this.render_audio() : ''}
          {this.fileType === 'video' ? this.render_video() : ''}
        </div>
      )
    },
  },
  render() {
    const {
      title,
      visible,
      width,
      height,
      handleClose,
      handleEnter,
      handlerOpen,
      handlerClose,
    } = this
    return (
      <div class="custom-filespop">
        <c-dialog
          {...{
            attrs: {
              title,
              visible,
              width,
              height,
              'before-close': handleClose,
            },
            on: {
              'after-enter': handleEnter,
              open: handlerOpen,
              close: handlerClose,
            },
          }}
        >
          {this.render_body()}
        </c-dialog>
      </div>
    )
  },
}
</script>
<style lang="scss">
.custom-filespop {
  .el-dialog__body {
    padding: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .files-pop-content {
    height: 480px;
    text-align: center;
    &.img-hide img {
      visibility: hidden;
    }
    .files-pop-audio {
      padding: 0 80px;
      position: absolute;
      width: 100%;
      transform: translateY(-50%);
      margin-top: 240px;
    }
    video {
      height: 100%;
      width: 100%;
    }
  }
  .pop-imgs {
    position: relative;
    transform: translateY(-50%);
    margin-top: 240px;
  }
}
</style>
